<template>
  <ul class="bgm-lists">
    <li v-for="(bgm,index) in lists" :key="bgm.ID" @click="pickBgm(bgm,bgm.ID)" class="f-cb" :class="{active_bg:bgm.ID==liIndex}">
      <!-- <span>{{ bgm.name }}.{{ bgm.type }}</span> -->
      <span class="origin">{{bgm.MusicName}}</span>
      <a href="#" class="f-fr" @click="playMusic(bgm)"><i class="el-icon-service"></i></a>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'bgm-lists',
	data(){
		return{
			liIndex:-1
		}
	},
  props: {
    lists: {
      type: Array
    },
    active: {
      type: Object
    }
  },
  methods: {
    pickBgm (bgm,index) {
      this.$emit('pick', bgm)
			this.liIndex = index
    },
    playMusic (bgm) {
      this.$emit('play', bgm)
    }
  }
}
</script>
<style lang="scss">
  .bgm-lists {
    > li {
      padding: 5px 10px;
      font-size: 12px;
      line-height: 26px;
      cursor: pointer;
      > a {
        display: block;
        padding: 0 5px;
        font-size: 14px;
      }
      &:nth-child(2n + 1) {
        background-color: #f7f7f7;
      }
      &:hover {
        background-color: #1593ff;
        color: #fff;
      }
    }
    >li:hover a{
      color: #fff;
    }
    .origin {
      margin-left: 20px;
    }
  }
</style>
